<template>
  <div class="container">
    <salaryTopTitle
      @gobackTriser="toSalaryList"
      :salaryOperate="salaryOperate"
      :salaryExcel="salaryExcel"
    ></salaryTopTitle>

    <!--支付信息-->
    <div class="mainCon">
      <createSalaryStep
        :lastItem="lastItem"
        :activeIndex="activeIndex"
      ></createSalaryStep>
      <div class="vessel">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
          <el-tab-pane label="企业网银在线支付" name="first">
            <ul class="EBank">
              <li class="notice">
                请使用公司工资专户【{{ data.bankName }}
                {{ data.account | deseHandler(4, 4, '*') }}】支付款项
              </li>
              <li class="item">
                <div class="itemName">支付方式</div>
                <div>
                  企业银行在线支付，款项实时到账，<span class="notice"
                    >仅支持部分银行</span
                  >
                  <!-- <el-link type="primary">查看</el-link> -->
                  <el-popover
                    placement="bottom"
                    title="支持银行"
                    width="580"
                    trigger="hover"
                  >
                    <img src="../../../static/img/salary/bank.png" />
                    <!-- <span slot="reference" class="link">查看</span> -->
                    <el-link type="primary" slot="reference">查看</el-link>
                  </el-popover>
                </div>
              </li>
              <li class="item">
                <div class="itemName">支付金额</div>
                <div>
                  <span class="number">￥{{ data.payTotal }}</span>
                  <span class="serviceCharge"
                    >(含手续费￥{{ data.poundageTotal }})</span
                  >
                  <el-popover
                    placement="top-start"
                    title="企业银联在线支付手续费"
                    width="400"
                    trigger="hover"
                  >
                    <ul class="serviceChargeDetail">
                      <li class="tipsTitle">
                        手续费由银联收取，监管平台不收取任何费用
                      </li>
                      <li>
                        预收代发手续费：<span
                          >￥ {{ data.issuePoundage }}*{{
                            data.payCount
                          }}
                          人（失败部分可退）</span
                        >
                      </li>
                      <li>
                        银联支付手续费：<span
                          >￥{{ data.fixPoundage }}（不可退）</span
                        >
                      </li>
                      <li class="total">
                        手续费共计：￥{{ data.poundageTotal }}
                      </li>
                    </ul>
                    <el-link type="primary" slot="reference">查看详情</el-link>
                  </el-popover>
                </div>
              </li>
              <li class="item">
                <div class="itemName">注意事项</div>
                <div class="noticeItem">
                  ※
                  款项到账后的次日中午，系统将自动把工资到发放到员工工资卡上，请您耐心等待；
                </div>
                <div class="noticeItem">
                  ※ 如您需要手续费的发票，可联系银联商务客服电话：95534
                </div>
              </li>
              <div class="btnContainer">
                <el-button
                  class="commonBut saveBtn"
                  @click="toPay"
                  :loading="isPay"
                  >立即支付</el-button
                >
                <!-- <div class="goBack">
                        <i class="el-icon-s-ticket"></i> 返回上一页
                    </div> -->
                <el-button class="commonBut" @click="toSalaryList"
                  >返回工资表管理</el-button
                >
              </div>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="企业线下打款" name="second">
            <ul class="EBank">
              <li class="notice">
                请使用公司工资专户【{{ data.bankName }}
                {{ data.account | deseHandler(4, 4, '*') }}】支付款项
              </li>
              <li class="item">
                <div class="itemName">支付方式</div>
                <div>
                  企业银行线下汇款，汇款识别码
                  <span class="notice">{{ data.payToBankCode }}</span>
                  ，请将此汇款识别码填写至电汇凭证的<span class="notice"
                    >[附言]</span
                  >
                  栏内
                </div>
              </li>
              <li class="item">
                <div class="itemName">支付金额</div>
                <div>
                  <span class="number">￥{{ data.payTotalOffLine }}</span>
                  <span class="serviceCharge"
                    >(含手续费￥{{ data.poundageTotalOffLine }})</span
                  >
                  <!-- <el-link type="primary">查看详情</el-link> -->
                  <el-popover
                    placement="top-start"
                    title="企业线下支付手续费"
                    width="400"
                    trigger="hover"
                  >
                    <ul class="serviceChargeDetail">
                      <li class="tipsTitle">
                        手续费由银联收取，监管平台不收取任何费用
                      </li>
                      <li>
                        预收代发手续费：<span
                          >￥ {{ data.issuePoundage }}*{{
                            data.payCount
                          }}
                          人（失败部分可退）</span
                        >
                      </li>
                      <!-- <li>银联支付手续费：<span>￥{{data.fixPoundage}}（不可退）</span></li> -->
                      <li class="total">
                        手续费共计：￥{{ data.poundageTotalOffLine }}
                      </li>
                    </ul>
                    <el-link type="primary" slot="reference">查看详情</el-link>
                  </el-popover>
                </div>
              </li>
              <li class="item">
                <div class="itemName">收款账户</div>
                <div>
                  户名
                  <span class="information">{{ data.unionpayBankName }}</span>
                  账号
                  <span class="information">{{ data.unionpayBankCount }}</span
                  >开户行
                  <span class="information">{{ data.unionpayBank }}</span>
                </div>
              </li>
              <li class="item">
                <div class="itemName">注意事项</div>
                <div class="noticeItem">
                  ※
                  1个工资表对应1个汇款识别码，请勿多转账或者少转账，金额核对不上，系统无法执行代发；
                </div>
                <div class="noticeItem">
                  ※
                  付款成功后，款项到账周期为1-3个工作日，款项到账后的次日中午，系统将发放工资到员工工资卡上；
                </div>
                <div class="noticeItem">
                  ※ 如您需要手续费的发票，可联系银联商务客服电话：95534
                </div>
              </li>
              <div class="btnContainer">
                <el-button class="commonBut saveBtn" @click="toSalaryList"
                  >返回工资表管理</el-button
                >
              </div>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div id="formContainer" style="display: none"></div>
  </div>
</template>

<script>
import createSalaryStep from '@/components/publicCom/createSalaryStepJz'
import salaryTopTitle from '@/components/publicCom/salaryTopTitle'

export default {
  name: 'paySalary',
  components: {
    createSalaryStep,
    salaryTopTitle,
  },
  data() {
    return {
      salaryOperate: 'salaryOperate', //非建工资下载
      salaryExcel: 'salaryExcel', //非建工资模板
      lastItem: '支付工资表',
      activeIndex: 2,
      activeName: 'first',
      // 页面传值
      salaryId: '',
      data: '',
      //支付loading
      isPay: false,
      fromFullPath: '',
      type: '',
    }
  },
  created() {
    this.$nextTick(function () {
      $('.el-tabs__active-bar').css('transform', 'translateX(38px)')
    })
    this.salaryId = this.$route.query.salaryId
    this.type = this.$route.query.type
    this.toPaySalary()
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    //获取页面数据
    toPaySalary() {
      this.axios({
        method: 'post',
        url: 'api-su/salarydetail/base/confirmpay',
        data: {
          salaryId: this.salaryId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.data = response.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'warning',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'warning',
            })
          }
        )
        .catch((error) => {})
    },
    // 立即支付
    toPay() {
      this.isPay = true
      this.axios({
        method: 'post',
        url: 'api-sp/unionpay/pay',
        data: {
          batchId: this.salaryId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              //页面跳转
              $('#formContainer').html(response.data.result.form)
              this.isPay = false
              $('#pay_form').submit()

              this.showSwal()
            } else {
              this.isPay = false
              this.$message({
                message: response.data.errorMsg,
                type: 'warning',
              })
            }
          },
          (response) => {
            this.isPay = false
            this.$message({
              message: '数据请求失败',
              type: 'warning',
            })
          }
        )
        .catch((error) => {})
    },
    // 支付跳转后的弹窗
    showSwal() {
      this.$confirm(
        '请您在新打开的页面上进行支付, 支付完成前请先不要关闭此窗口',
        '企业网银在线支付中',
        {
          confirmButtonText: '支付已完成',
          cancelButtonText: '支付失败',
          type: 'warning',
        }
      )
        .then(() => {
          this.detectionPayState()
        })
        .catch(() => {
          this.detectionPayState()
        })
    },
    // 检测支付状态
    detectionPayState() {
      this.axios({
        method: 'post',
        url: 'api-sp/unionpay/one',
        data: {
          salaryId: this.salaryId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result) {
                this.$router.push('/home/salary/salaryDetail/' + this.salaryId)
              } else {
              }
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'warning',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'warning',
            })
          }
        )
        .catch((error) => {})
    },
    //返回工资表管理
    toSalaryList() {
      this.$router.push('/home/salary/qySalaryList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      if (this.fromFullPath == '/home/salary/editSalary') {
        this.$router.push({
          path: '/home/salary/editSalary',
          name: 'editSalary',
          query: {
            salaryId: this.salaryId,
            type: this.type,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/salary/qySalaryList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push(this.fromFullPath)
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/salary/qySalaryList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
  },
  watch: {
    activeName(newVal, oldVal) {
      if (newVal == 'second') {
        this.$nextTick(function () {
          $('.el-tabs__active-bar').css('transform', 'translateX(267px)')
        })
      } else {
        this.$nextTick(function () {
          $('.el-tabs__active-bar').css('transform', 'translateX(38px)')
        })
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.fromFullPath = from.fullPath
    })
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 197px;
}

.vessel {
  text-align: center;
  margin-top: 60px;
  .tabs {
    width: 595px;
    display: inline-block;
    /deep/ .el-tabs__nav {
      transform: translateX(104px) !important;
      -webkit-transform: translateX(104px) !important;
      -moz-transform: translateX(104px) !important;
      transform: translateX(104px) !important;
    }
    /deep/ .el-tabs__item.is-active {
      font-size: 14px;
      color: #333;
    }
    /deep/ .el-tabs__active-bar {
      background-color: #009588;
    }
    /deep/ .el-tabs__item {
      color: #333;
      // padding: 0 58px;
      margin: 0 38px;
    }
    /deep/ .el-tabs__item.is-top:nth-child(2) {
      padding-left: 0;
    }
    /deep/ .el-tabs__item:hover {
      color: #333;
    }
    /deep/ .el-tabs__nav-wrap::after {
      background-color: #dee5f4;
      height: 1px;
      // width: 595px;
    }
    /deep/ .el-tabs__header {
      margin-bottom: 0;
    }
  }
}

// 打款方式
.EBank {
  padding: 24px;
  padding-bottom: 0;
  font-size: 14px;
  color: #333;
  text-align: left;
  .notice {
    font-size: 14px;
    color: #e02020;
  }
  .item {
    margin-top: 24px;
    .itemName {
      font-size: 14px;
      color: #999;
      margin-bottom: 12px;
    }
    .number {
      font-size: 28px;
      color: #f78b00;
      margin-right: 12px;
    }
    .serviceCharge {
      font-size: 14px;
      color: #666;
      margin-right: 12px;
    }
    .noticeItem {
      margin-bottom: 12px;
    }
    .information {
      margin: 0 12px;
    }
  }
  .btnContainer {
    text-align: center;
    padding-top: 22px;
    margin-top: 24px;
    border-top: 1px solid #dee5f4;
    .goBack {
      margin-top: 22px;
      font-size: 14px;
      color: #999;
    }
  }
}

// 提示

.serviceChargeDetail {
  margin-top: -10px;
  li {
    line-height: 30px;
    span {
      color: #000;
    }
  }
  .tipsTitle {
    color: #999;
    margin-bottom: 5px;
  }
  .total {
    border-top: 1px solid #dbdbdd;
    color: #000;
    font-size: 1.1em;
  }
}
</style>
